<template>
  <van-cell>
    <template #title>
      <slot name='top-left'></slot>
    </template>
    <template #value>
      <slot name='top-right'></slot>
    </template>
    
  </van-cell>
  <div>
   <van-swipe 
        class="swipebox" 
        :show-indicators='false'
        :loop='false'
        :width='120'
        >
        <van-swipe-item v-for="(item,index) in list" :key='index' class="item" >
         <div class="itembox">
            <van-image :src="item.picUrl"  radius="5" class="itemimage"></van-image>
          <div class="">
              <p class="van-multi-ellipsis--l2">{{index}}--{{item.name}}</p>
            </div>
         </div>
        </van-swipe-item>
      </van-swipe>
</div>


</template>

<script setup>
import { reactive } from '@vue/reactivity';


const porps = defineProps({
  dataList :Array
})
const list = reactive([{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
},{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
},{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
},{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
},{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
},{
  name:"我从未爱过你 怎么会想念你",
  id:'5055228769',
  picUrl:"https://p2.music.126.net/0Wmazw23XsxRHmLwd4hkiw==/109951166498859179.jpg",
  playCount:4821270
}])


</script>

<style lang="less" scoped>
.swipebox{
  .item{
    .itembox{
      margin: 5px;
      padding: 5px;
      font-size: 8px;
      .itemimage{
        width: 100%;
      }
    }
  }
}

</style>